<template>
  <div 
    class="desktop-icon"
    :class="{ 'selected': isSelected }"
    @click="handleClick"
    @dblclick="handleDoubleClick"
    @contextmenu.prevent="handleContextMenu"
  >
    <div class="icon-wrapper">
      <el-image :src="app.icon" fit="contain" class="app-icon" />
    </div>
    <div class="icon-title">{{ app.name }}</div>
    
    <!-- Context Menu -->
    <el-dropdown
      v-model="showContextMenu"
      trigger="contextmenu"
      @command="handleCommand"
      :teleported="false"
      ref="dropdownRef"
    >
      <span class="context-menu-trigger"></span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="open">打开</el-dropdown-item>
          <el-dropdown-item command="remove-from-desktop">从桌面移除</el-dropdown-item>
          <el-dropdown-item command="uninstall" divided>卸载应用</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import type { App } from '@/types/app'

const props = defineProps<{
  app: App
  isSelected: boolean
}>()

const emit = defineEmits<{
  (e: 'click', appId: number): void
  (e: 'dblclick', appId: number): void
  (e: 'select', appId: number): void
  (e: 'unselect', appId: number): void
  (e: 'remove-from-desktop', appId: number): void
  (e: 'uninstall', appId: number): void
}>()

const showContextMenu = ref(false)
const dropdownRef = ref()

// 处理单击事件
const handleClick = (event: MouseEvent) => {
  // 阻止事件冒泡
  event.stopPropagation()
  
  // 触发选中事件
  emit('select', props.app.id)
  
  // 触发点击事件
  emit('click', props.app.id)
}

// 处理双击事件
const handleDoubleClick = (event: MouseEvent) => {
  // 阻止事件冒泡
  event.stopPropagation()
  
  // 触发双击事件
  emit('dblclick', props.app.id)
}

// 处理右键菜单
const handleContextMenu = (event: MouseEvent) => {
  // 选中图标
  if (!props.isSelected) {
    emit('select', props.app.id)
  }
  
  // 显示上下文菜单
  showContextMenu.value = true
}

// 处理菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'open':
      emit('dblclick', props.app.id)
      break
    case 'remove-from-desktop':
      emit('remove-from-desktop', props.app.id)
      break
    case 'uninstall':
      emit('uninstall', props.app.id)
      break
  }
  
  // 关闭上下文菜单
  showContextMenu.value = false
}
</script>

<style scoped>
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 5px;
  border-radius: 5px;
  position: relative;
  width: 80px;
  height: 90px;
  margin: 10px;
}

.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.desktop-icon.selected {
  background-color: rgba(255, 255, 255, 0.2);
}

.icon-wrapper {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-title {
  font-size: 12px;
  color: white;
  text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style> 